<script setup lang="ts">
import {useRouter} from "vue-router";

import {onMounted, ref} from "vue";

import MyAxios from "../../plugins/myAxios.ts";
import {showConfirmDialog, showToast} from "vant";
import myAxios from "../../plugins/myAxios.ts";


const router = useRouter()


const onClickRight = () => {
  showConfirmDialog({
    title: '删除记录',
    message: '确认删除所有历史记录吗？',
}).then(() => {
  myAxios.get('/post/delete/all/history')
     .then(res => {
        if (res.data.data) {
          list.value = [];
          showToast('删除成功');
        } else {
          showToast('删除失败');
        }
      })
     .catch(err => {
        console.log(err);
      })
}).catch(() => {
  console.log('取消删除');
});}


const list = ref<{
  id: number;
  title: string;
  content: string;
  thumbNum: number;
  favourNum: number;
  userId: number;
  createTime: string;
  updateTime: string;
}[]>([]); // 使用 ref 创建响应式变量


//定义 item 的值并规定类型
interface Item {
  // interface 改成 type 也行
  id: number;
}

const postDetails = (item: Item) => {
  router.push({
    path: '/post/get',
    query: {
      id: item.id
    }
  })
}


onMounted(() => {
  getOriginalPostList();
});


const getOriginalPostList = () => {
  MyAxios.get('/user/history/post') // 发送 POST 请求
      .then(res => {
        list.value = []; // 清空列表
        console.log(res); // 打印接口返回的数据
        list.value = res.data.data; // 使用 ref 创建的响应式变量
        console.log(list.value); // 打印接口返回的数据
        // 处理其他返回的数据...
        return res.data.data;
      })
      .catch(err => {
        console.error("Error fetching data:", err);
      });
}


const loading = ref(false);
const finished = ref(false);

const onClickLeft = () => {
  router.push('/user')
}


const deletePost = (id: number, event: Event) => {
  event.stopPropagation();


  // on confirm
  myAxios.get('/post/delete/history', {params: {postId: id}})
      .then(res => {
        if (res.data.data) {
          const index = list.value.findIndex(item => item.id === id);
          list.value.splice(index, 1);
          showToast('删除成功');
        } else {
          showToast('删除失败');
        }
      })
      .catch(err => {
        console.log(err);
      })
}

</script>

<template>


  <div style="width: 100vw;height: 100vh">
    <van-nav-bar class="nav-bar"
                 title="历史记录"
    >
      <template #right>
        <van-icon name="search" size="18"/>
      </template>
    </van-nav-bar>
    <img src="../../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft"/>

    <img src="../../assets/叉叉.png" class="back-btn" alt="搜索" @click="onClickRight"/>

    <div class="container">

      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :offset="20" class="list">

        <van-card
            class="show-card"
            v-for="item in list"
            :title="item.title"
            :desc="item.content"
            @click="postDetails(item)"
        >
          <template #footer>
            <div class="footer">
              <van-image @click="($event) => deletePost(item.id, $event)"
                         style="z-index: 10; width: 10%; height:50%; left: 90%; position: absolute; cursor: pointer; "
                         src="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/common_btn_jian.png">
              </van-image>
            </div>
          </template>
        </van-card>
      </van-list>

    </div>

    <!--    <van-text-ellipsis :content="listItem" />-->

  </div>


</template>

<style scoped>
.footer {
  width: 100%;
  height: 50%;
  position: absolute;
  top: -5%
}


.back-btn {
  position: fixed;
  float: right;
  right: 5px;
  top: -2px;

  width: 50px;
  height: 50px;
  z-index: 2;
}

.back-btn1 {
  position: fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 2;
}

.list {
  margin-top: 60px;
  margin-bottom: 50px;

}


.show-card {
  margin-top: 10px;
  width: 90%;
  height: 100px;
  margin-left: 5%;
  border-radius: 10px;
  top: 6%;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}


</style>